<template>
  <div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="18">
        <el-form label-width="80px" style="float:left" size="small" :inline="true">
              <el-form-item label="目录名称">
                <el-input placeholder="请输入内容"  v-model="queryData.directoryName" style="width:200px"></el-input>
              </el-form-item>
                <el-form-item label="状态">
                  <el-select placeholder="请选择" value="" v-model="queryData.state">
                    <el-option :value="1" label="启用"></el-option>
                    <el-option :value="0" label="禁用"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item>
                <el-button style="margin-left:10px" @click="closeValue">清除</el-button>
                <el-button type="primary" @click="getList">搜索</el-button>
              </el-form-item>
          </el-form>
        </el-col>
      <el-button type="success" icon="el-icon-edit" style="float:right; margin-left:20px;" @click="addclass">新增目录</el-button>
      <el-button  :underline="false" type="text" style="float:right;" class="el-icon-back" @click='returnSubject' v-if="$route.query.id">返回学科</el-button>
      </el-row>
      <!-- 警告信息 -->
      <el-alert
      style="margin-bottom:20px"
        :title="`数据一共${counts}条`"
        type="info"
        show-icon>
      </el-alert>
        <el-table :data=list style="width: 100%">
          <el-table-column type="index" label="序号" ></el-table-column>
          <el-table-column label="学科名称" prop="subjectName" ></el-table-column>
          <el-table-column label="目录名称" prop="directoryName" ></el-table-column>
          <el-table-column label="创建者" prop="creator" >超级管理员</el-table-column>
          <el-table-column label="创建日期" prop="addDate">
            <template slot-scope="scope">
              <div>
                {{ getTiems(scope.row.addDate) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="面试题数量" prop="totals" ></el-table-column>
          <el-table-column label="状态" prop="state" >
            <template slot-scope="scope">
              {{ scope.row.state === 1 ? '已开启':'已禁用'}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="240px">
            <template slot-scope="scope" >
              <el-button type="text" @click="clickState(scope.row)" >禁用</el-button>
              <el-button type="text" @click="showFditDialog(scope.row)" :disabled="scope.row.state === 1 ? true : false">修改</el-button>
              <el-button type="text" @click="removeFditDialog(scope.row)" :disabled="scope.row.state === 1 ? true : false" >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pageTool @pageChange="pageChange" @pageSizeChange="pageSizeChange" :total="counts" :paginationPage="queryData.page" :paginationPagesize="queryData.pagesize"></pageTool>
    </el-card>

    <el-dialog
      @close="addFormClose"
      title="新增目录"
      :visible.sync="addDialogVisible"
      width="30%"
      >
      <el-form :model="ruleForm" ref="addFormref" :rules="addFormRules">
        <el-form-item label="所属学科" v-if="!$route.query.id" prop="subjectID">
          <el-select v-model="ruleForm.subjectID" placeholder="请选择">
            <el-option
              v-for="item in optionsValue"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName" label-width="80px">
          <el-input v-model="ruleForm.directoryName" style="width: 220px" ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubject" >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改弹框 -->
    <el-dialog
      title="修改目录"
      :visible.sync="cloDialogVisible"
      width="30%"
      >
      <el-form :model="ruleForm" ref="editFormref" :rules="addFormRules">
        <el-form-item v-if="!$route.query.id" label="所属学科">
          <el-select v-model="ruleForm.subjectID" placeholder="请选择">
            <el-option
              v-for="item in optionsValue"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName" label-width="80px">
          <el-input v-model="ruleForm.directoryName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cloDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="ediuserinfo" >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pageTool from '@/module-dashboard/components/pageTool.vue'
import { list, add, remove, update, changeState } from '@/api/hmmm/directorys.js'
import { simple } from '@/api/hmmm/subjects.js'
import { parseTime } from '@/utils/index.js'
export default {
  data () {
    return {
      // 接收简单列表数据
      optionsValue: {},
      queryData: {
        page:1,
        pagesize: 10,
        subjectID: this.$route.query.id,
        directoryName: null,
        state: null
      },
      list: [],
      counts: 0,
      // 状态
      statusValue:'',
      // 控制修改对话框的显示与隐藏
      addDialogVisible: false,
      ruleForm: {
        // 下拉列表选中
        // value: '',
        subjectID: '',
        directoryName: ''
      },
      addFormRules: {
        directoryName: [
          {required: true, message: '请填写目录名称', trigger: 'blur' }
        ],
        subjectID: [
          {required: true, message: '请选择学科名称', trigger: 'blur' }
        ]
      },
      // 控制修改框弹出
      cloDialogVisible: false
    }
  },

  created () {
    // this.queryData.subjectID = this.$route.query.id
    // this.queryData.directoryName = this.$route.query.subjectName
    // console.log(this.queryData)
    this.getList()
    this.getSubIDList()
  },
  components: {
    pageTool
  },
  methods: {
    // 携带subID的获取
    async getSubIDList () {
      // console.log(this.$route.query)
      // console.log(this.queryData)
      const { data:res } = await list({
        page: this.queryData.page,
        pagesize: this.queryData.pagesize,
        subjectID: this.$route.query.id
      })
      this.list = res.items
      this.counts = res.counts
    },
    // 获取数据列表信息
    async getList () {
        const { data: res } = await list(this.queryData)
        this.list = res.items
        this.counts = res.counts
        // console.log(res)
    },
    // 格式化日期
    getTiems (time) {
      return parseTime(new Date(time))
    },
    // 监听当前页面显示数据条数
    pageSizeChange (val) {
      console.log(val)
      this.queryData.pagesize = val
      this.getList()
    },
      // 监听当前页码值
    pageChange(val) {
      console.log(val)
      // this.queryData.Page = 1
      this.queryData.page = val
      this.getList()
    },
    // 点击状态状态
    async clickState (row) {
      await changeState({
        id: row.id,
        state: row.state === 1 ? 0 : 1
      })
      this.$message.success('操作成功')
      row.state = row.state === 1 ? 0 : 1
    },
    // 清除
    closeValue () {
      this.queryData = {
         page:1,
        pagesize: 10,
        subjectID: null,
        directoryName: null,
        state: null
      }
      this.getList()
    },
    // 新增学科展示编辑用户对话框
    async addclass () {
      console.log(1)
      this.addDialogVisible = true
      const { data: res } = await simple()
      this.optionsValue = res
      console.log(this.optionsValue)
    },
    // 点击确认提交
    addSubject () {
      this.$refs.addFormref.validate(async flag => {
        if ( !flag ) return
          // this.ruleForm.subjectID = this.ruleForm.value
          // console.log(this.$route.query.id)
          const res = await add({
            subjectID: parseInt(this.ruleForm.subjectID || this.queryData.subjectID),
            directoryName: this.ruleForm.directoryName
          })
          this.getList()
          if ( res.status !== 200) return this.$message.error('添加失败')
          this.$message.success("添加成功")
          this.addDialogVisible = false
          this.getSubIDList()
      })
    },
    // 清空添加表单
    addFormClose () {
      this.$refs.addFormref.resetFields()
    },
    // 控制修改弹框显示
    async showFditDialog (row) {
      console.log(row)
      this.cloDialogVisible = true
      const { data: res } = await simple()
      this.ruleForm.subjectID = row.subjectID
      console.log(this.ruleForm.subjectID)
      this.ruleForm=JSON.parse(JSON.stringify(row))
      this.optionsValue = res
    },
    // 修改发请求获取数据，提交
    ediuserinfo () {
      this.$refs.editFormref.validate(async flag => {
        if (flag) {
          // console.log(this.ruleForm.subjectID)
          const { data: res } = await update({
            id: this.ruleForm.id,
            subjectID: this.ruleForm.subjectID,
            directoryName: this.ruleForm.directoryName
          })
          console.log(res)
          this.cloDialogVisible = false
          this.getSubIDList()
        } else {
          this.$message.success('请认真填写表单')
        }
      })
    },
    // 删除功能
    removeFditDialog(row) {
      // 弹框提示用户是否删除
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await remove(row)
        console.log(res)
        this.getList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 返回学科
    returnSubject() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped lang='less'>

</style

